// import AllinMarker from "../../components/allinMarker/AllinMarker";
import {monitor} from "../../axios/intellect/intellect"
import {
    outAndIn, sevenLoad, irrigationData, radioData, waterData, electricData, airData, parkData,
    opDatas, thingsNumsDatas, sevenAnalysis, todayBroken, irrigationTable, radioTable, screenTable,
    todayThings,
} from '../../axios/public/index'
import moment from 'moment'
import allMarker from "./mapMarker/allMarker";
import {toMillionNums} from '../../filters/index'

export default {
    props: {
        mapData: Object
    },
    data() {
        return {
            borderArr: [{
                id: 1,
                title: '游客出入闸机',
                online: '12',
                devNum: '16',
                dayIdentify: '20000',
                fault: 111,
                executionDev: 1110

            }],
            showHide: true,
            alertWindowShow: false,
            windowTitle: '',
            tableData: [
                // {name: '党风党建音频', date: '每日09:30-10:30', nums: '15首'},
                // {name: '公益音频', date: '每日11:00-11:30', nums: '15首'},
                // {name: '宣传音频', date: '每日14:00-14:30', nums: '15首'},
                // {name: '音乐音频', date: '每日19:30-22:30', nums: '15首'},
                // {name: '科技音频', date: '每日17:30-18:30', nums: '15首'},
            ],
            page: 1,
            rows: 5,
            currentPage: 1,
            irrigationObj: {},
            total: 0,
            deviceId: 0,
            deviceDatas: {},  //游客出入闸机
            sevenArr: {},
            waterObj: {},
            electricObj: {},
            airObj: {},
            electricArr: [],  //电
            waterArr: [],  //水
            airArr: [],  //气
            opObj: {},
            thingsNumsObj: {},
            radioObj: {},
            outRadioObj: {},
            grassRadioObj: {},
            allScreenObj: {},
            comScreenObj: {},
            intScreenObj: {},
            ledScreenObj: {},
            sevenAfObj: {},
            sevenAfToalNum: 0,
            openType: 0,

            friedArr: [],// 闸机点位
            screen: [],// 智能屏幕点位
            irrigation: [],//灌溉点位
            broadcast: [],//广播点位
            zhaji1: {},
            zhaji2: {},
            zhaji3: {},
            todayBrokenArr: [],
            timer:null,
            thingsTable:false,
            thingsRows:10,
            thingsPage:1,
            tableThingsData:[],
            totalThings:0,
            serch1:false,
            serch2:false,
            serch3:false,
            serch4:false,
            raiod1:false,
            raiod2:false,
            raiod3:false,
            currentPageInit:1,

            markerData: null


        }
    },
    mounted() {
        this.myChart1 = this.$echarts.init(document.getElementById('sevenLoad'));
        this.myChart2 = this.$echarts.init(document.getElementById('irrigation'));
        this.myChart3 = this.$echarts.init(document.getElementById('radioChart'));
        this.myChart4 = this.$echarts.init(document.getElementById('screenChart'));
        this.myChart5 = this.$echarts.init(document.getElementById('waterChart'));
        this.myChart6 = this.$echarts.init(document.getElementById('electricChart'));
        this.myChart7 = this.$echarts.init(document.getElementById('ariChart'));
        this.myChart8 = this.$echarts.init(document.getElementById('deviceOp'));
        this.myChart9 = this.$echarts.init(document.getElementById('publicThings'));
        this.myChart10 = this.$echarts.init(document.getElementById('sevenAllThing'));
        this.myChart11 = this.$echarts.init(document.getElementById('dayBroken'));
        this.getOutAndIn(0);
        this.getOutAndIn(41910000360001);
        this.getOutAndIn(41910000360002);
        // this.getOutAndIn(41910000360003);
        this.getSevenLoad();
        this.getIrrigationData();
        this.getRadioData(4130);  //所有音柱
        this.getRadioData(4131);  //室外音柱
        this.getRadioData(4133);  //草坪音柱
        this.getWaterData();
        this.getElectricData();
        this.getAirData();
        this.getParkDataWater(1);  //电
        this.getParkDataWater(2);  //水
        this.getParkDataWater(3);  //气
        this.getOpDatas();
        this.getThingsNumsDatas();
        this.getSevenAnalysis();
        this.getRadioData(1340);  //所有智能屏
        this.getRadioData(1341);  //综合导览
        this.getRadioData(1342);  //智能导览
        this.getRadioData(1343);  //LED
        this.gettodayBroken();
        this.getIrrigationTable();
        this.closeTheWindow();
        this.closeThatWindow();
        this.getMarkerData() // 点位信息
        this.timer = setInterval(() => {
            this.getSevenLoad();
            this.getOutAndIn(0);
            this.getOutAndIn(41910000360001);
            this.getOutAndIn(41910000360002);
            this.getOutAndIn(41910000360003);
            this.getRadioData(4130);  //所有音柱
            this.getRadioData(4131);  //室外音柱
            this.getRadioData(4133);  //草坪音柱
            this.getRadioData(1340);  //所有智能屏
            this.getRadioData(1341);  //综合导览
            this.getRadioData(1342);  //智能导览
            this.getRadioData(1343);  //LED
            this.getParkDataWater(1);  //电
            this.getParkDataWater(2);  //水
            this.getParkDataWater(3);  //气
            this.getOpDatas();
            this.getThingsNumsDatas();
            this.getSevenAnalysis();
            this.gettodayBroken();
            // this.getMarkerData() // 点位信息
        }, 10000);
    },
    destroyed(){
        window.clearInterval(this.timer)
    },
    methods: {
        openThingsTable(type) {
            this.thingsTable = !this.thingsTable;
            if(type == 'open') {
                this.getTodayThing();
            }
        },
        getTodayThing() {
            let params = {
                type: 5,
                data: {
                    size: this.thingsRows,
                    current: this.thingsPage
                }
            }
            todayThings(params).then(res => {
                this.tableThingsData = res.data.records;
                this.totalThings = res.data.total;
            }, err => {
            })
        },
        handleCurrentChangeThings(val) {
            this.thingsPage = val;
            this.getTodayThing();
        },
        closeTheWindow() {
            document.addEventListener('mouseup', (e) => {
                let box = this.$refs.windowBox
                if (box) {
                    if (!box.contains(e.target)) {
                        this.thingsTable = false;
                    }
                }
            })
        },
        closeThatWindow() {
            document.addEventListener('mouseup', (e) => {
                let box = this.$refs.windowBox1
                if (box) {
                    if (!box.contains(e.target)) {
                        this.alertWindowShow = false;
                    }
                }
            })
        },
        changeShow() {
            this.showHide = !this.showHide;
        },
        closeThreeWindow() {
            this.alertWindowShow = false;
        },
        openWindow(type) {
            this.alertWindowShow = !this.alertWindowShow;
            this.currentPageInit = 1;
            this.openType = type;
            this.page = 1;
            if (type == 1) {
                this.windowTitle = '智能灌溉';
                this.getIrrigationTable();
            } else if (type == 2) {
                this.windowTitle = '智能广播';
                this.getradioTable();
            } else if (type == 3) {
                this.windowTitle = '智能屏';
                this.getscreenTable();
            }
        },
        handleCurrentChange(val) {
            this.page = val;
            if (this.openType == 1) {
                this.getIrrigationTable();
            } else if (this.openType == 2) {
                this.getradioTable();
            } else if (this.openType == 3) {
                this.getscreenTable();
            }
        },
        getradioTable() {
            let params = {
                itemId: 36,
                size: this.rows,
                current: this.page
            }
            radioTable(params).then(res => {
                this.total = res.data.total;
                this.tableData = res.data.records;
            }, err => {
            })
        },
        getscreenTable() {
            let params = {
                itemId: 36,
                size: this.rows,
                current: this.page
            }
            screenTable(params).then(res => {
                this.total = res.data.total;
                this.tableData = res.data.records;
            }, err => {
            })
        },
        getOutAndIn(deviceId) {
            //游客出入闸机
            let params = {deviceId: deviceId};
            outAndIn(params).then(res => {
                console.log(res)
                if (deviceId == 0) {
                    this.deviceDatas = res.data;
                } else if (deviceId == 41910000360001) {
                    this.zhaji1 = res.data;
                } else if (deviceId == 41910000360002) {
                    this.zhaji2 = res.data;
                } else if (deviceId == 41910000360003) {
                    this.zhaji3 = res.data;
                }
            }, err => {
            })
        },
        getSevenLoad() {
            sevenLoad().then(res => {
                this.sevenArr = res.data;
            }, err => {
            })
        },
        getIrrigationData() {
            let params = {
                itemId: '36',
            }
            irrigationData(params).then(res => {
                this.irrigationObj = res.data;
            }, err => {
            })
        },
        getRadioData(typeIds) {
            let params = {
                typeIds: typeIds,
                itemId: 36
            }
            radioData(params).then(res => {
                if (typeIds == 4130) {  //所有
                    this.radioObj = res.data;
                    this.raiod3 =true;
                } else if (typeIds == 4131) {  //室外
                    this.outRadioObj = res.data;
                    this.raiod2 =true;
                } else if (typeIds == 4133) {  //草坪
                    this.grassRadioObj = res.data;
                    this.raiod1 =true;
                } else if (typeIds == 1340) {  //所有智能屏
                    this.allScreenObj = res.data;
                } else if (typeIds == 1341) {  //综合导览
                    this.comScreenObj = res.data;
                } else if (typeIds == 1342) {  //智能导览
                    this.intScreenObj = res.data;
                } else if (typeIds == 1343) {  //LED
                    this.ledScreenObj = res.data;
                }
            }, err => {
            })
        },
        getWaterData() {
            waterData().then(res => {
                this.waterObj = res.data;
            }, err => {
            })
        },
        getElectricData() {
            let params = {
                deviceId: this.deviceId
            }
            electricData(params).then(res => {
                this.electricObj = res.data;
            }, err => {
            })
        },
        getAirData() {
            let params = {
                deviceId: this.deviceId
            }
            airData(params).then(res => {
                this.airObj = res.data;
            }, err => {
            })
        },
        getParkDataWater(type) {
            let params = {
                type: type,
                equipName: 0
            }
            parkData(params).then(res => {
                if (type == 1) {  //电
                    this.electricArr = res.data;
                } else if (type == 2) {  //水
                    this.waterArr = res.data;
                } else if (type == 3) {  //气
                    this.airArr = res.data;
                }
            }, err => {
            })
        },
        getOpDatas() {
            //当日设备运维情况
            opDatas().then(res => {
                this.opObj = res.data;
            }, err => {
            })
        },
        getThingsNumsDatas() {
            //事件统计 数量
            let params = {
                type: 1
            }
            thingsNumsDatas(params).then(res => {
                this.thingsNumsObj = res.data;
            }, err => {
            })
        },
        getSevenAnalysis() {
            //sevenAnalysis
            let params = {
                type: 1
            }
            sevenAnalysis(params).then(res => {
                let dateArr = [];
                let radioArr = [];
                let messageArr = [];
                let irrigationArr = [];
                let sysArr = [];
                let tatal1 = 0;
                let tatal2 = 0;
                let tatal3 = 0;
                let tatal4 = 0;
                for (var i = 0; i < res.data.length; i++) {
                    let date = moment().subtract('days', i).format('MM-DD');
                    dateArr.push(date);
                    radioArr.push(res.data[i].number3);
                    messageArr.push(res.data[i].number2);
                    irrigationArr.push(res.data[i].number1);
                    sysArr.push(res.data[i].number4);
                    tatal1 += res.data[i].number1;
                    tatal2 += res.data[i].number2;
                    tatal3 += res.data[i].number3;
                    tatal4 += res.data[i].number4;
                }
                this.sevenAfObj = {
                    dateArr: dateArr,
                    radioArr: radioArr,
                    messageArr: messageArr,
                    irrigationArr: irrigationArr,
                    sysArr: sysArr
                }
                this.sevenAfToalNum = tatal1 + tatal2 + tatal3 + tatal4;
            }, err => {
            })
        },
        gettodayBroken() {
            let params = {
                day: 1
            }
            todayBroken(params).then(res => {
                this.todayBrokenArr = res.data;
            }, err => {
            })
        },
        getIrrigationTable() {
            irrigationTable().then(res => {
                this.total = res.data.total;
                this.tableData = res.data.records;
            }, err => {
            })
        },
        sevenLoadInit(dom) {
            // const dates = ['05:06','05:07','05:08','05:09','05:10','05:11','05:12'];
            // const loadDatas = [20000,15000,16000,15000,14000,20000,11000];
            const dates = [];
            const loadDatas = [];
            for (var i = 0; i < this.sevenArr.wwList.length; i++) {
                dates.push(this.sevenArr.wwList[i].time);
                loadDatas.push(this.sevenArr.wwList[i].number)
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 38,
                    left: 54,
                    right: 10,
                    bottom: '11%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(次)',
                    minInterval: 1,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '总导览次数',
                    type: 'line',
                    data: loadDatas,
                    lineStyle: {
                        color: '#32E9FF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#32E9FF',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        irrigationInit(dom) {
            let datas = {
                online: this.irrigationObj.onLineNumber,
                all: this.irrigationObj.rainNumber + this.irrigationObj.meterNumber + this.irrigationObj.magnetismNumber + this.irrigationObj.soilNumber,
            };
            const options = {
                title: {
                    text: '在线设备',
                    left: '13.5%',
                    bottom: '18%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        let str = '在线设备: ' + params.value;
                        return str
                    },
                },
                polar: {
                    radius: ['45%', '55%'],
                    center: ['20%', '41%'],
                },
                angleAxis: {
                    max: datas.all,
                    show: false,
                    clockwise: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: false,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        roundCap: false,
                        barWidth: 90,
                        showBackground: true,
                        backgroundStyle: {
                            color: '#174F62'
                        },
                        data: [datas.online],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            color: '#32E9FF'
                        },
                    },
                ]
            }
            dom.setOption(options)
        },
        radioChartInit(dom) {
            let datas = {
                online: this.grassRadioObj.onLine + this.outRadioObj.onLine,
                all: this.radioObj.total,
            };
            const options = {
                title: {
                    text: '在线设备',
                    left: '13.5%',
                    bottom: '18%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        let str = '在线设备: ' + params.value;
                        return str
                    },
                },
                polar: {
                    radius: ['45%', '55%'],
                    center: ['20%', '41%'],
                },
                angleAxis: {
                    max: datas.all,
                    show: false,
                    clockwise: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: false,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        roundCap: false,
                        barWidth: 90,
                        showBackground: true,
                        backgroundStyle: {
                            color: '#174F62'
                        },
                        data: [datas.online],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            color: '#32E9FF'
                        },
                    },
                ]
            }
            dom.setOption(options)
        },
        screenChartInit(dom) {
            let datas = {
                online: this.allScreenObj.onLine,
                all: this.allScreenObj.total,
            };
            const options = {
                title: {
                    text: '在线设备',
                    left: '14%',
                    bottom: '18%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        let str = '在线设备: ' + params.value;
                        return str
                    },
                },
                polar: {
                    radius: ['45%', '55%'],
                    center: ['20%', '41%'],
                },
                angleAxis: {
                    max: datas.all,
                    show: false,
                    clockwise: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: false,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        roundCap: false,
                        barWidth: 90,
                        showBackground: true,
                        backgroundStyle: {
                            color: '#174F62'
                        },
                        data: [datas.online],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            color: '#32E9FF'
                        },
                    },
                ]
            }
            dom.setOption(options)
        },
        waterChartInit(dom) {
            // const dates = ['05:06','05:07','05:08','05:09','05:10','05:11','05:12'];
            // const loadDatas = [8,6,2,4,12,5,10];
            let dates = [];
            let loadDatas = [];
            for (var i = 0; i < this.waterArr.length; i++) {
                dates.push(this.waterArr[i].time);
                loadDatas.push(this.waterArr[i].dayValue);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 28,
                    left: 40,
                    right: 10,
                    bottom: '18%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(t)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -26]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 3,
                    // minInterval: 1
                },
                series: [{
                    name: '用水量',
                    type: 'line',
                    data: loadDatas,
                    lineStyle: {
                        color: '#32E9FF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#32E9FF',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        electricChartInit(dom) {
            // const dates = [];
            // const loadDatas = [];
            let dates = [];
            let loadDatas = [];
            for (var i = 0; i < this.electricArr.length; i++) {
                dates.push(this.electricArr[i].time);
                loadDatas.push(this.electricArr[i].dayValue);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 28,
                    left: 40,
                    right: 10,
                    bottom: '18%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(kwh)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -20]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 3,
                    // minInterval: 1
                },
                series: [{
                    name: '用电量',
                    type: 'line',
                    data: loadDatas,
                    lineStyle: {
                        color: '#EEFD7B',
                        width: 3
                    },
                    itemStyle: {
                        color: '#EEFD7B',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(238,253,123,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(238,253,123,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        ariChartInit(dom) {
            // const dates = ['05:06','05:07','05:08','05:09','05:10','05:11','05:12'];
            // const loadDatas = [8,6,2,4,12,5,10];
            let dates = [];
            let loadDatas = [];
            for (var i = 0; i < this.airArr.length; i++) {
                dates.push(this.airArr[i].time);
                loadDatas.push(this.airArr[i].dayValue);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 28,
                    left: 35,
                    right: 15,
                    bottom: '12%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(m³)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -20]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 3,
                    // minInterval: 1
                },
                series: [{
                    name: '用气量',
                    type: 'line',
                    data: loadDatas,
                    lineStyle: {
                        color: '#2BADFF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#2BADFF',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        deviceOpInit(dom) {
            let datas = {
                isHandel: this.opObj.number2,
                noHandel: this.opObj.number3,
            };
            const options = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '76%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: true,
                        hoverAnimation: false,
                        startAngle: 30,
                        emphasis: {},
                        label: {
                            show: true,
                            fontSize: 10,
                            formatter: '{c}件\n\n{b}'
                        },
                        labelLine: {
                            show: true,
                            length: 2,
                            length2: 20,
                            lineStyle: {
                                width: 2,
                            }
                        },
                        markLine: {
                            silent: true
                        },
                        data: [{
                            name: '未处理事件',
                            value: datas.noHandel,
                            itemStyle: {
                                color: '#FFAD95'
                            },
                            label: {
                                color: '#FFAD95'
                            }
                        }, {
                            name: '已处理事件',
                            value: datas.isHandel,
                            itemStyle: {
                                color: '#32E9FF'
                            },
                            label: {
                                color: '#32E9FF'
                            }
                        }]
                    }
                ]
            }
            dom.setOption(options)
        },
        publicThingsInit(dom) {
            let datas = {
                radio: 15,
                message: 6,
                irrigation: 10,
                sys: 8,
            };
            let data = this.thingsNumsObj.oneList;
            const options = {
                title: {
                    text: '当日公共设施事件',
                    left: '9%',
                    bottom: '-4%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '76%'],
                        center: ['23%', '45%'],
                        avoidLabelOverlap: true,
                        hoverAnimation: false,
                        startAngle: 30,
                        emphasis: {},
                        label: {
                            show: false,
                            fontSize: 20,
                            formatter: '{b}\n{c}'
                        },
                        labelLine: {
                            show: true,
                            length: 20,
                            length2: 20
                        },
                        markLine: {
                            silent: true
                        },
                        data: [{
                            name: data[0].typeName,
                            value: data[0].number,
                            itemStyle: {
                                color: '#2BADFF'
                            },
                            label: {
                                color: '#2BADFF'
                            }
                        }, {
                            name: data[1].typeName,
                            value: data[1].number,
                            itemStyle: {
                                color: '#FFAD95'
                            },
                            label: {
                                color: '#FFAD95'
                            }
                        }, {
                            name: data[2].typeName,
                            value: data[2].number,
                            itemStyle: {
                                color: '#32E9FF'
                            },
                            label: {
                                color: '#32E9FF'
                            }
                        }, {
                            name: data[3].typeName,
                            value: data[3].number,
                            itemStyle: {
                                color: '#EEFD7B'
                            },
                            label: {
                                color: '#EEFD7B'
                            }
                        }]
                    }
                ]
            }
            dom.setOption(options)
        },
        sevenAllThingInit(dom) {
            const dateArr = this.sevenAfObj.dateArr;
            const radioArr = this.sevenAfObj.radioArr;
            const messageArr = this.sevenAfObj.messageArr;
            const irrigationArr = this.sevenAfObj.irrigationArr;
            const sysArr = this.sevenAfObj.sysArr;
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    }
                },
                legend: [
                    {
                        orient: 'horizontal',
                        x: '5%',
                        y: '86%',
                        align: 'left',
                        data: ['智能广播事件'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '28%',
                        y: '86%',
                        align: 'left',
                        data: ['智慧灌溉事件'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '51%',
                        y: '86%',
                        align: 'left',
                        data: ['入园系统事件'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '74%',
                        y: '86%',
                        align: 'left',
                        data: ['信息发布事件'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    }
                ],
                grid: {
                    top: 0,
                    left: 50,
                    right: 15,
                    bottom: 50
                },
                calculable: true,
                xAxis: [{
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}件',
                    },
                    splitArea: {
                        show: false
                    },
                    splitNumber: 4,
                    // minInterval: 1
                }],
                yAxis: [{
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    data: dateArr
                }],
                series: [
                    {
                        name: '智能广播事件',
                        type: 'bar',
                        stack: '总量',
                        barMaxWidth: 8,
                        barGap: '10%',
                        itemStyle: {color: '#2BADFF'},
                        data: radioArr
                    },
                    {
                        name: '智慧灌溉事件',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#32E9FF'},
                        data: irrigationArr
                    },
                    {
                        name: '入园系统事件',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#EEFD7B'},
                        data: sysArr
                    },
                    {
                        name: '信息发布事件',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#FFAD95'},
                        data: messageArr
                    },
                ]
            }
            dom.setOption(option)
        },
        dayBrokenInit(dom) {
            var isHandle = [];
            var noHandle = [];
            var times = [];
            for (var i = 0; i < this.todayBrokenArr.list1.length; i++) {
                times.push(this.todayBrokenArr.list1[i].typeName);
                isHandle.push(this.todayBrokenArr.list2[i].number);
                noHandle.push(this.todayBrokenArr.list1[i].number);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    // icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 35,
                    left: 30,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: times,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: [
                    {
                        minInterval:1,
                        name: '(件)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -30]
                        },
                        type: 'value',
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        splitNumber: 3,
                        // minInterval: 1
                    },
                ],
                series: [{
                    name: '已处理',
                    type: 'bar',
                    data: isHandle,
                    lineStyle: {
                        color: '#2BADFF'
                    },
                    itemStyle: {
                        color: '#2BADFF'
                    },
                    barWidth: 14,
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                    barGap: '30%'
                }, {
                    name: '未处理',
                    type: 'bar',
                    data: noHandle,
                    lineStyle: {
                        color: '#32E9FF'
                    },
                    itemStyle: {
                        color: '#32E9FF'
                    },
                    barWidth: 14,
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                }]
            }
            dom.setOption(options)
        },
        // 获取点位信息
        getMarkerData() {
            monitor(4190).then(res => {
                res.data.forEach(item => {
                    item.names = "出入闸机"
                })
                this.friedArr = res.data
                this.serch1 = true
            })
            monitor(1340).then(res => {
                res.data.forEach(item => {
                    item.names = "智能屏"
                })
                this.screen = res.data
                this.serch2 = true
            })
            monitor(4100).then(res => {
                res.data.forEach(item => {
                    item.names = "智慧灌溉"
                })
                this.irrigation = res.data//灌溉点位
                this.serch3 = true
            })
            monitor(4130).then(res => {
                res.data.forEach(item => {
                    item.names = "智能广播"
                })
                this.broadcast = res.data
                this.serch4 = true
            })
            let that = this;
            // setTimeout(() => {
            //     that.markerData = [
            //         that.friedArr,// 闸机点位
            //         that.screen,// 智能屏幕点位
            //         that.irrigation,//灌溉点位
            //         that.broadcast,//广播点位
            //     ]
            //     console.log(that.markerData,'原始数据')
            //     that.$refs.allMarker.setAllMarker(that.markerData, that.mapData)
            // }, 5000)
        },
    },
    computed: {
        markersGet() {
            //点位监听 4个接口数据
            const {serch1, serch2, serch3, serch4} = this
            return {
                serch1,
                serch2,
                serch3,
                serch4
            }
        },
        radioChartDatas() {
            //智能广播图表数据监听，3个接口
            const {raiod1, raiod2, raiod3} = this
            return {
                raiod1,
                raiod2,
                raiod3,
            }
        }
    },
    watch: {
        deep: true,
        markersGet(newval, oldval) {
            // 监听4个接口的数据，都拿到以后渲染点位信息
            if(newval.serch1 === true && newval.serch2 === true && newval.serch3 === true && newval.serch4 === true) {
                this.markerData = [
                    this.friedArr,// 闸机点位
                    this.screen,// 智能屏幕点位
                    this.irrigation,//灌溉点位
                    this.broadcast,//广播点位
                ]
                // console.log(this.markerData,'原始数据')
                this.$refs.allMarker.setAllMarker(this.markerData, this.mapData)
            }
        },
        radioChartDatas(newval, oldval) {
            if(newval.raiod1 === true && newval.raiod2 === true && newval.raiod3 === true) {
                this.radioChartInit(this.myChart3);
            }
        },
        'sevenArr':{
            handler(newVal,oldVal){
                this.sevenLoadInit(this.myChart1);
            }
        },
        'waterArr':{
            handler(newVal,oldVal){
                this.waterChartInit(this.myChart5);
            },
        },
        'irrigationObj':{
            handler(newVal,oldVal){
                this.irrigationInit(this.myChart2);
            }
        },
        'radioObj':{
            handler(newVal,oldVal){

            }
        },
        'allScreenObj':{
            handler(newVal,oldVal){
                this.screenChartInit(this.myChart4);
            }
        },
        'electricArr':{
            handler(newVal,oldVal){
                this.electricChartInit(this.myChart6);
            }
        },
        'airArr':{
            handler(newVal,oldVal){
                this.ariChartInit(this.myChart7)
            }
        },
        'opObj':{
            handler(newVal,oldVal){
                this.deviceOpInit(this.myChart8);
            }
        },
        'thingsNumsObj':{
            handler(newVal,oldVal){
                this.publicThingsInit(this.myChart9);
            }
        },
        'sevenAfObj':{
            handler(newVal,oldVal){
                this.sevenAllThingInit(this.myChart10);
            }
        },
        'todayBrokenArr':{
            handler(newVal,oldVal){
                this.dayBrokenInit(this.myChart11);
            }
        },
        // 'markerData':{
        //     handler(newVal,oldVal){
        //         this.$refs.allMarker.length = 0
        //         console.log('地图刷新')
        //         this.$refs.allMarker.setAllMarker(this.markerData, this.mapData)
        //     }
        // }
    },
    components: {
        allMarker
    },

}